<template>
    <div class="join-progress" :style="{'background-color': backgroundColor}">
        <div class="join-progress-indicator join-progress-indicator-solid"
            :style="{width: progress + '%'}">
        </div>
    </div>
</template>

<script>
    export default {
        name: 'JoinProgress',
        props: {
            progress: {
                type: [ Number, String ],
                default: 0,
            },
            backgroundColor: {
                type: String,
            },
        },
    };
</script>

<style lang="less">
    @import "../../lib/style/mixins.less";

    @progress-height: 10px;
    .join-progress {
        margin-top: 28rpx;
        height: @progress-height;
        border-radius: @progress-height;
        border: 1px solid @white-color;
        overflow: hidden;
        box-sizing: border-box;
    }
    .join-progress-indicator {
        height: @progress-height - 4;
        border-radius: @progress-height - 4;
    }
    .join-progress {
        width: 100%;
        background-color: #f2f2f2;
        .join-progress-indicator {
            transition: width 0.3s;
        }
        .join-progress-indicator-solid {
            background-color: @primary-color;
        }
    }
</style>